<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
     <% String  now= request.getContextPath();
	String path= request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+now +"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
	<link rel="stylesheet" type="text/css" href="<%=path%>/myoa/layui/css/layui.css" media="all">
  <script type="text/javascript"  src="<%=path%>/myoa/js/jquery-3.2.1.js"></script>
   <script src="<%=path%>/myoa/laydate/laydate.js"></script> 
	<script type="text/javascript" src="<%=path%>/myoa/layui/layui.js" ></script>
  <script src="<%=path%>/myoa/laydate/laydate.js"></script>
  <script type="text/javascript" src="<%=path%>/myoa/js/vue.js" ></script>
    <link href="<%=path%>/myoa/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <script src="<%=path%>/myoa/bootstrap/js/bootstrap.min.js"></script>
  
  <style type="text/css">
#showTable{
		    table-layout:100px; 
			width: 1500px;
			text-align: center; 
}
</style>
<body >

<div id="rongqi">

  
	  
<button class="layui-btn layui-btn-lg layui-btn-normal" data-toggle="modal" data-target="#search" v-on:click="getDept()" >查询</button>
 <table class="layui-table  " lay-skin="line" id="showTable" style="table-layout:fixed;" >

  <thead>
    <tr>
    	
      <th  style="text-align: center;width:50px;height: 60px;">全选</th>
      <th  style="text-align: center;width: 100px;height: 60px;">申请人</th>
      <th  style="text-align: center;width: 100px;height: 60px;">联系电话</th>
      <th  style="text-align: center;width: 100px;height: 60px;">所属部门</th>
      <th style="text-align: center;width: 100px;height: 60px;">申请原因</th>
      <th style="text-align: center;width: 100px;height: 60px;">开始日期</th>
      <th style="text-align: center;width: 100px;height: 60px;">申请天数</th>
      <th style="text-align: center;width: 100px;height: 60px;">申请详情</th>
      <th style="text-align: center;width: 100px;height: 60px;">申请状态</th>
      <th style="text-align: center;width: 100px;height: 60px;">负责人</th>
      <th style="text-align: center;width: 100px;height: 60px;">申请日期</th>
      <th style="text-align: center;width: 200px;height: 60px;">操作</th>
    </tr> 
  </thead>
  <tbody>
  
<!-- real_name,pa_id,pa_title,pa_context,pa_date,pa_startDate,pa_day,pa_status,pa_phone,pa_dept,pa_boss -->
     <tr id="showData" v-for=" apply in  allApply " >
      <td style="text-align: center;width:20px;height: 60px;"><input type="checkbox" name="checkbox" v-bind:value=apply.pa_id class="checkbox" align="center" ></input> </td>
      <td style="text-align: center;width: 100px;height: 60px;">{{apply.real_name}}</td>
      <td style="text-align: center;width: 100px;height: 60px;">{{apply.pa_phone}}</td>
      <td style="text-align: center;width: 100px;height: 60px;">{{apply.pa_dept}}</td>
      <td style="text-align: center;width: 100px;height: 60px;">{{apply.pa_title}}</td>
      <td style="text-align: center;width: 100px;height: 60px;">{{apply.pa_startDate}}</td>
      <td style="text-align: center;width: 100px;height: 60px;">{{apply.pa_day}}</td>
      <td  class="layui-elip" style="text-align: center;width: 100px;height: 60px;">{{apply.pa_context}}</td>
      <td style="text-align: center;width: 100px;height: 60px;">{{apply.pa_status}}</td>
      <td style="text-align: center;width: 100px;height: 60px;">{{apply.pa_boss}}</td>
      <td style="text-align: center;width: 100px;height: 60px;">{{apply.pa_date}}</td>
      <td style="text-align: center;width: 200px;height: 60px;">
	  <a class="layui-btn layui-btn-normal  layui-btn-xs btn-primary " data-toggle="modal" data-target="#check" v-on:click="checkApply(apply.pa_id)"   name="look" >查看</a>
 	  <a class="layui-btn layui-btn-danger layui-btn-xs"  v-on:click="deleteApply(apply.pa_id)" >删除</a>
 	 </td>
    </tr>
    <tr>
     <td  style="text-align:left;width:50px;height: 60px;">
      <button class="layui-btn layui-btn-sm layui-btn-primary" id="checkAll">全选</button>
	 </td>
	 <td></td>
	 <td></td>
	 <td></td>
	 <td></td>
	 <td></td>
	 <td></td>
	 <td></td>
	 <td></td>
	 <td></td>
	 <td></td>
	 <td>
	 <a class="layui-btn layui-btn-normal  layui-btn-xs btn-primary " name="look"  id="roleLook" >查看</a>
 	 <a class="layui-btn layui-btn-danger layui-btn-xs"  v-on:click="allDelete()" >删除</a>
 	 </td>

	</tr>

  </tbody>
  <tfoot>
  
  </tfoot>
</table> 
<div>
<div id="demo0" align="right" style="margin-right: 120px;"  ></div> 
</div>







<!-- --------------------------------------------查看膜态框 ------------------------------------------------ -->

<div class="modal fade" id="check"  role="dialog" aria-labelledby="text" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<h4 class="modal-title" id="text" align="center">{{check.real_name}}</h4>
</div>
<div class="modal-body">
		<table   class="layui-table" lay-size="lg" style="text-align:center;" id="checkTable">
	<tr>
<td>申请人</td>
<td>{{check.real_name}}</td>
	</tr>
	
	<tr>
<td>联系电话</td>
<td>{{check.pa_phone}}</td>
	</tr>
	<tr>
<td>所属部门</td>
<td>{{check.pa_dept}}</td>
	</tr>
	<tr>
<td>申请原因</td>
<td>{{check.pa_title}}</td>
	</tr>

	<tr>
<td>开始日期</td>
<td>{{check.pa_startDate}}</td>
	</tr>
	<tr>
<td>申请天数</td>
<td>{{check.pa_day}}</td>
	</tr>
	<tr>
<td>申请状态</td>
<td align="center">
	 <select  id="checkStatus" class="layui-hide">
	 	<option value="check.pa_status">{{check.pa_status}}</option>
        <option  id="agree" value="同意" >同意</option>
        <option  id="disagree" value="不同意">不同意</option>
     </select>
    <span class="layui-hide"  id="nowStatus">{{check.pa_status}}</span>
</td>


	</tr>
	<tr>
<td>负责人</td>
<td>{{check.pa_boss}}</td>
	</tr>
		<tr>
<td>申请日期</td>
<td>{{check.pa_date}}</td>
	</tr>

		<tr>
<td>申请详情</td>
<td><textarea name="desc" placeholder="请输入内容" class="layui-textarea" disabled="" >{{check.pa_context}}</textarea></td>
	</tr>
		</table>



</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<!-- 普通员工不显示 -->
<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="updateApply(check.pa_id)">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>


<!--  ----------------------------------------------------查询模态框  ------------------------------------------  -->

<div class="modal fade" id="search"  role="dialog" aria-labelledby="title" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<h4 class="modal-title" id="title" align="center">查询条件</h4>
</div>
<div class="modal-body">
<form  id="searchForm">
<table   class="layui-table" lay-size="lg" style="text-align:center;" id="checkTable">
<tr>
<td>申请人</td>
<td><input type="text" name="pa_name"></td>
</tr>
	
	<tr>
<td>联系电话</td>
<td><input type="text" name="pa_phone"></td>
	</tr>
	<tr>
<td>所属部门</td>
<td>
	<select name="pa_dept" >
	 	<option  value="" >  </option>
	 	<option    v-for="dp in dept" v-bind:value=dp.dept_name >{{dp.dept_name}}</option>
     </select></td>
	</tr>
	<tr>
<td>申请原因</td>
<td>
	 <select name="pa_title" >
	 	<option  value="">  </option>
	 	<option  value="事假">事假</option>
        <option  value="病假">病假</option>
        <option  value="出差">出差</option>
        <option  value="其他">其他</option>
     </select></td>
	</tr>

	<tr>
<td>开始日期</td>
<td><input type="text" name="pa_startDate"  id="startDate" placeholder="请选择开始时间" class="layui-input"> </td>
	</tr>
	<tr>
<td>申请天数</td>
<td>
<input type="text" name="pa_day">
</td>
	</tr>
	<tr>
<td>申请状态</td>
<td align="center">
	 <select  name="pa_status">
	 	<option  value="">    </option>
	 	<option  value="待审核">待审核</option>
        <option  value="同意" >同意</option>
        <option  value="不同意">不同意</option>
     </select>
</td>


	</tr>
	<tr>
<td>负责人</td>
<td><input type="text" name="pa_boss" ></td>
	</tr>
		<tr>
<td>申请日期</td>
<td>
<input type="text" name="pa_date"  id="applyDate" placeholder="请选择开始时间" class="layui-input"> </td>
</tr>
	<tr>
	
	<!-- 普通员工不显示 -->
	
	 <td><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button></td>
	 <td><button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="search(1)">查询</button>></td>
	</tr>
	</table>
</form>		
</div>





</div><!-- /.modal-content -->
</div><!-- /.modal -->

</div>


</div> <!--最外层容器  -->
      <script type="text/javascript">
      
      var form= new FormData();
 
      var vue=new Vue({
    	el:'#rongqi',
    	data:{
    	allApply:'',
    	check:'',
    	curr:1,
    	formcurr:1,
    	applydata:'',//判断返回数据是否为空，若为空 值为0
    	boss:" ",
    	dept:" ",
    	ceshi:"",
    	checkSearch:0  //判断更改后调用的查询方法   0为get（所有的查询 ）  1为search(条件查询)，默认为0
    	
    	},
    	methods:{
    		get:function(curr){
    			
    		  $.ajax({
    			  url:'/OA/queryAllApply',
    			  data:{curr:curr},
    			  type:'post',
    			  dataType:'json',
    			  success:function(result){
    				
    				  if(result.apply==""){  //如果为空都不显示
    					  vue.applydata=0;
    					  return '';
    				  }else{
    					  var role_id='${sessionScope.role_id}';
    					  if(role_id==1){
    						  $("#roleLook").attr("class","layui-btn layui-btn-normal  layui-btn-xs btn-primary layui-hide");
    					  }
    						 vue.allApply=result.apply;

    				  layui.use(['laypage', 'layer'], function(){
    					 	var laypage=layui.laypage;
    					 	var layer = layui.layer;
    					 	laypage.render({
    					 		elem:'demo0',
    					 		count:result.count,//
    					 		curr:curr,	
    					 		limit:2,
    					 		jump: function(obj, first){
    								vue.curr=obj.curr;
    					 		    //首次不执行
    					 		    if(!first){
    					 		     vue.get(obj.curr);
    					 		    }
    					 		   
    					 		  }
    					 	})//render
						
    				  }) //yayui 
    				}   //else
    				
    		} //success 

    	})//ajax 


    },//function 
    
    /*----------------------------------------查看方法--------------------------------------------------  */
    checkApply:function(pa_id){
    				//获取当前角色权限
    				var role_id="${sessionScope.role_id}";
					//首先获取到当前的查询到的所有数据 
					var data=vue.allApply;
					//便利所有数据 
					$.each(data,function(index,val){
				//比较 pa_id，相等的那个给checkDate赋值
				if(pa_id==val.pa_id){
					//首先判断当前用户角色  如过该用户是普通角色只显示状态
					//若不是普通用户 显示下拉框更改权限
				if(role_id!=1){
					
					$("#checkStatus").attr('class','layui-show');
					if(val.pa_status=="同意"){
						$("#agree").attr('class','layui-hide');
					}else if(val.pa_status=="不同意"){
						$("#disagree").attr('class','layui-hide');
					}else{
						$("#agree,#disagree").attr('class','layui-show');
					}
					
					
				}else{
					$("#nowStatus").attr('class','layui-show');
				}

					vue.check=val;
				}
				
			})
			
			
			

		},
    
    /*----------------------------------------更改状态分割线 --------------------------------------------------  */
   updateApply:function(pa_id){
	   var checkStatus=$("#checkStatus").val();
	   	$.ajax({
	   	url:"/OA/BossUpdateApply",//更改请求
	   	type:"post",
	   	data:{pa_status:checkStatus,pa_id:pa_id},
	   	dataType:"text",
	   	success:function(result){
	   		  //返回1为成功
	   		   if(result=="1"){
	   			 alert("更改成功"); //调用展示方法 
	   			 if(vue.checkSearch==0){
	   				var curr=vue.curr;
	   				vue.get(curr);
	   			 };
	   			 if(vue.checkSearch==1){
	   				 var curr=vue.formcurr;
	   				 vue.search(curr);
	   				 
	   			 }
	   			 
	   		   }else{
	   			 alert("更改失败");
	   		   }
	   			
	   		}
	   	
	   	  })   
  		},
 
	 /*----------------------------------------批量删除分割线 --------------------------------------------------  */
    allDelete:function(){
    	/*   获取所有的选中的pa_id */
    	var array=new Array();
   	 $("input[name='checkbox']:checkbox:checked").each(function(index,val){ 
   		 array.splice(index,0,val.value); }) ;
   	 		$.ajax({
			 url:"/OA/deleteAllApply",
		     data:{array:array},
			 type:'post',
			 dataType:'text',			
			 success:function(result){
				 if(result=="1"){
					 var checkSearch=vue.checkSearch
						if(checkSearch==1){
							var fcurr=vue.formcurr;
							vue.search(fcurr);
						}
						if(checkSearch==0){
							vue.get(curr);
						}
						alert("删除成功");
				 }
				 
				 
			 }
			 
   		 })   	    	
    	
    },
  		 /*----------------------------------------单个删除申请分割线 --------------------------------------------------  */
  	deleteApply:function(pa_id){
  		var curr=vue.curr;
  		$.ajax({
			 url:"/OA/deleteApply",
		     data:{pa_id:pa_id},
			 type:'post',
			 dataType:'text',			
			 success:function(result){
				 if(result=="1"){
					var checkSearch=vue.checkSearch
							if(checkSearch==1){
								var fcurr=vue.formcurr;
								vue.search(fcurr);
							}
							if(checkSearch==0){
								vue.get(curr);
							}
							alert("删除成功");
						} ; //重新刷新界面 
					 
				 }
			
			 
  		 })   	    	
	
  	},
  	/*----------------------------------------------------获取部门-----------------------------------------------------------  */
  		 getDept:function(){
  			$.ajax({
  				 url:"/OA/queryAllDept",
  				 type:'post',
  				 dataType:'json',			
  				 success:function(result){
  					vue.dept=result;
  					console.log(vue.dept);
  				 }
  				 
  	  		 })   	 
  		 },
  		 
  		 /*-----------------------------------------条件查询 --------------------------------------------------------  */
  		search:function(curr){
  			vue.checkSearch=1;
  			vue.formcurr=curr;
  			var formData= new FormData();
	 if(curr==1){
  		 formData = new FormData($("#searchForm")[0]);
		 form=formData;
		 formData.append("curr",curr);
  	}	
 	 else{	
  		 formData =form;
  		 formData.set("curr",curr);
  		 }  
  		
  			$.ajax({
  				 url:"/OA/queryApply",
  				 type:'post',
  				 data:formData,
  				 dataTpye:"json",
  				  	processData: false,
  	             	contentType: false,
  				 success:function(result){
  					 console.log(result);
  					 vue.allApply=result.apply;
  					
  				  layui.use(['laypage', 'layer'], function(){
  					 	var laypage=layui.laypage;
  					 	var layer = layui.layer;
  					 	laypage.render({
  					 		elem:'demo0',
  					 		count:result.count,//
  					 		curr:curr,	
  					 		limit:2,
  					 		jump: function(obj, first){
  					 			vue.formcurr=obj.curr;
  					 		    //首次不执行
  					 		    if(!first){
  					 		    	vue.search(obj.curr);
  					 		    }
  					 		  }
  					 	})//render
						
  				  }) //yayui 
  					 
  					 
  				 }//success
  				
  			})
  			
  			
  		}
  		 
    
    	}//method 

  })
      
      

  		window.onload=vue.get(1);
		/* $("#showTable").attr('class', 'layui-table  layui-show'); */
		
		
		
		/* -------------全选按钮 --------------------------- */
$("#checkAll").click(function(){ 
		$("input[name='checkbox']").attr("checked","true");
})	
function exit(){
	$('#identifier').modal('hide');
		}


// lay—date 函数 
laydate.render({
  elem: '#startDate'
  ,type: 'datetime'
});
		
laydate.render({
	  elem: '#applyDate'
	  ,type: 'datetime'
	});

  
	
 

		 
		
</script>





</body>
</html>